<template>
    <div class="data-pie">
        <ve-pie width="100%" height="300px" :legend-visible="false" :extend="tableData.dataNum?chartExtend:chartExtendHide" :colors="tableData.dataNum?chartColors:chartColorsHide" :data="chartData"></ve-pie>
        <div class="data-pie-content-number">
            <span>数据总量：{{tableData.dataNum}}</span>
            <span>占用空间：{{usesize}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DataPie',
    props: {
        tableData: {
            required: true,
            type: Object
        }
    },
    data () {
        return {
            usesize: 0,
            chartExtendHide: {
                legend: {
                    data: ['临时表', '静态表'],
                    bottom: 0,
                    itemWidth: 13,
                    selectedMode: false,
                    icon: 'circle'
                },
                series: {
                    silent: true,
                    center: ['50%', '50%'],
                    radius: [0, '60%'],
                    label: false,
                    labelLine: {
                        show: false
                    }
                }
            },
            chartExtend: {
                legend: {
                    data: ['临时表', '静态表'],
                    bottom: 0,
                    itemWidth: 13,
                    icon: 'circle'
                },
                series: {
                    center: ['50%', '50%'],
                    radius: [0, '60%'],
                    labelLine: {
                        normal: {
                            smooth: 0.2,
                            length: 10,
                            length2: 15
                        }
                    }
                }
            },
            chartColorsHide: ['#EDF4FA'],
            chartColors: ['#F2637B', '#FFC76A'],
            chartData: {
                columns: ['名称', '数值'],
                rows: []
            },
            unit: ['B', 'KB', 'MB', 'GB']
        }
    },
    methods: {
        turnSize () {
            let num = ''
            while (this.usesize > 1024) {
                this.usesize /= 1024
                num++
            }
            this.usesize = Math.floor(this.usesize * 10) / 10 + this.unit[num] || 0 + 'B'
        }
    },
    watch: {
        tableData: {
            handler (val) {
                this.usesize = val.useSize
                this.chartData.rows = [
                    { '数值': val.tempTotal || 0, '名称': '临时表' },
                    { '数值': val.staticTotal || 0, '名称': '静态表' }
                ]
                this.turnSize()
            },
            deep: true,
            immediate: true
        }
    }
}
</script>

<style lang="less">
.data-pie {
    position: relative;
    width: 100%;
    height: 100%;
    .data-pie-content-number {
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        span {
            display: inline-block;
            margin-bottom: 5px;
        }
    }
}
</style>
